<template>
  <view class="file-content">
    <image
      src="https://img3.job1001.com/job1001/2024/images/file.png"
      class="icon-file"
    >
    </image>
    <view class="file-left">
      <view class="file-name">
        {{ file.fileName }}
      </view>
      <view class="file-size">
        <text>{{ formatFileSize(file.fileSize) }}</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "File",
  props: {
    file: {
      type: Object,
      default: () => ({
        fileName: "",
        fileSize: 0,
      }),
    },
  },
  methods: {
    formatFileSize(size) {
      if (!size) {
        return "";
      }
      if (size < 1024) {
        return size + "B";
      } else if (size < 1048576) {
        return (size / 1024).toFixed(1) + "KB";
      } else if (size < 1073741824) {
        return (size / 1048576).toFixed(1) + "MB";
      } else {
        return (size / 1073741824).toFixed(1) + "GB";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.file-content {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  text-align: left;
  
  .icon-file {
    width: 36px;
    height: 38px;
    align-self: center;
  }
  .file-left {
    flex: 1;
    margin: 0 12px;
    line-height: 1.5;

    .file-name {
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #000000;
    }

    .file-size {
      font-size: 14px;
      color: #999999;
    }
  }
}
</style>